<template>
  <el-dialog
    :title="'上传漏洞'"
    v-model="dialogVisible"
    width="800px"
    append-to-body
    destroy-on-close
  >
    <el-upload
      class="upload-demo"
      drag
      accept=".xls,.xlsx,.xml,.html"
      :http-request="httpRequest"
      :show-file-list="true"
      :auto-upload="false"
      ref="uploadRef"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽漏洞文件 或 <em>点击上传</em></div>
      <template #tip>
        <div
          class="el-upload__tip"
          style="
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="display: flex; align-items: center; gap: 12px;">
            <span>支持 .xml,.xlsx,.html 文件格式</span>
          </div>
          <div style="display: flex; align-items: center; gap: 8px;">
              <span style="font-size: 14px; color: #666;">模板格式:</span>
              <el-select
                v-model="templateFormat"
                size="small"
                style="width: 100px;"
                placeholder="选择格式"
              >
                <el-option label="xlsx" value="xlsx" />
                <el-option label="html" value="html" />
                <el-option label="xml" value="xml" />
              </el-select>
              <el-button
                text
                type="primary"
                @click="downloadTem"
              >
                下载漏洞文件模板
              </el-button>
            </div>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";
import { getUploadTemplate, UploadVulns } from "@/api/vulnerability.js";

/**
 * 定义组件接收的属性
 */
const props = defineProps({
  /**
   * 是否显示弹窗
   */
  visible: {
    type: Boolean,
    default: false,
  },
});

/**
 * 定义组件事件
 */
const emit = defineEmits(["update:visible"]);

// 弹窗可见状态，用于内部控制
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

// 模板格式选择，默认为xlsx
const templateFormat = ref("xlsx");

const httpRequest = (option) => {
  const formData = new FormData();
  formData.append("file", option.file);
  UploadVulns(formData).then((res) => {
    if (res.code === 200) {
      ElMessage.success("上传成功");
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 处理取消按钮点击
 */
const uploadRef = ref();
const handleCancel = () => {
  uploadRef.value.submit();
  dialogVisible.value = false;
};

/**
 * 下载漏洞文件模板
 */
const downloadTem = () => {
  getUploadTemplate(templateFormat.value).then(({ data }) => {
    // 根据选择的格式设置文件扩展名
    const fileExtension = templateFormat.value;
    const fileName = `漏洞文件上传模板.${fileExtension}`;
    
    // 下载文件
    const blob = new Blob([data]);
    const link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    window.URL.revokeObjectURL(link.href);
  });
};
</script>

<style lang="scss" scoped>
.upload-demo {
  :deep(.el-upload-list) {
    margin-top: 10px;
  }
}
</style>
